<!doctype html>  

<html lang="en" class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  
  <title>jsfx</title>
  <meta name="description" content="">
  <meta name="author" content="">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
  <link rel="stylesheet" href="css/typography.css">
  <style>
    #container {
      margin: 40px;
      width: 750px;
    }
    
    #main {
      width: 450px;
    }
    
    #button-panel {
      margin-bottom: 10px;
      padding: 3px;
      border: 1px dashed #666;
    }
    
    .button-set {
      margin:0;
      padding:0;
      padding-left: 20px;
      margin-left: 20px;
      border-left: 1px dotted #666;
    }
    
    .clear {
      clear : both;
    }
    
    #config-panel #generators {
      margin-bottom : 5px;
    }
    
    #config-panel table {
      background-color: #ffe;
      border: 1px dotted #333;
      border-collapse : collapse;
      width : 450px;
    }
    
    #config-panel table input[type="range"] {
      height : 18px;
      width  : 100%;
    }
    
    #config-panel table td, #config-panel table tr {
      text-align: right;
      padding : 0px 5px 0px;
      margin : 1px;
    }
    
    #config-panel table tr td:first-child {
      width: 150px;
      text-align: right;
    }
    #log, #library {
      padding : 5px;
      height: 100px;
      width : 450px;
      text-wrap: suppress;
      overflow: scroll;
      overflow-style:marquee-line;
      font-family:monospace;
      border: 1px #000 dashed; 
    }
    
    #stuff {
      margin-bottom : 10px;
    }
    #libload {
      width: 370px;
    }
  </style>
</head>

<body>
  <div id="container">
    <header>
      <h1>jsfx</h1>
      <p>See <a href="http://www.github.com/egonelbre/jsfx">github</a> for more information.</p>
    </header>
    <div id="main">
      <div id="button-panel">        
        <div id="sample-generators" class="button-set">
        </div>
        <hr /> 
        <div class="button-set">
          <button onclick="jsfxgui.reset()">Reset</button>
          <button onclick="jsfxgui.randomize()">Randomize</button>
          <button onclick="jsfxgui.play()">Play</button>
          <button onclick="jsfxgui.paramsToLibrary()">To Library</button>
        </div>
      </div>
      <div id="stuff">
      <input type="text" id="libload" value='["noise",0.0000,0.4000,0.0000,0.0060,0.0000,0.1220,20.0000,460.0000,2400.0000,-0.5240,0.0000,0.0000,0.0100,0.0003,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,0.9990,0.0000,0.0000,0.0000,0.0000]'></input><button onclick="jsfxgui.paramsFromFieldAndPlay()">Load</button>
      &nbsp;
      <a href="#" id="link">link</a>
      <br />
      <input type="checkbox" id="playonchange" checked>Play On Change</input>
      <br />
      
      </div>
      <div id="config-panel">
      </div>
    </div>
    
    <h3>Library</h3>
    <div id="library">
    </div>
    
    <h3>Log</h3>
    <div id="log">
      jsfx... loading...
    </div>
    
    <div class="clear">&nbsp;</div>
    <div id="spacer"></div>
    <footer>
      Egon Elbre &copy; 2011
    </footer>
  </div> <!-- end of #container -->

  <script src="../js/audio.js"></script>
  <script src="../js/jsfx.js"></script>
  <script src="../js/jsfxlib.js"></script>
  <script src="../js/jsfxgui.js"></script>
  <script>
    jsfxgui.createSampleGenerators("sample-generators");
    jsfxgui.createConfigurationPanel("config-panel");
    jsfxgui.initLogging("log");
    jsfxgui.initLibrary("library");
    jsfxgui.initField("libload");
    jsfxgui.onplay = onplay;
    
    (function(){ // Import GET Vars
      document.$_GET = [];
      var urlHalves = String(document.location).split('?');
      if(urlHalves[1]){
         var urlVars = urlHalves[1].split('&');
         for(var i=0; i<=(urlVars.length); i++){
            if(urlVars[i]){
               var urlVarPair = urlVars[i].split('=');
               document.$_GET[urlVarPair[0]] = urlVarPair[1];
            }
         }
      }
    })();
    
    var link = document.getElementById("link");
    var field  = document.getElementById("libload");
    
    function onplay(){
      this.paramsToField();
      link.href = "http://egonelbre.com/js/jsfx/index.html?load=" + field.value;
    }
    
    var onchange = document.getElementById("playonchange");
    jsfxgui.onvaluemodified = play;
    function play(){
      if( onchange.checked )
        jsfxgui.play();
    }
    
    var val = document.$_GET['load'];
    if(val !== undefined){
      document.getElementById('libload').value = val.replace(/%22/g,'"');
      jsfxgui.paramsFromField();
    }
  </script>
</body>
</html>
